<template>
	<view class="container d-flex">
		<view class="head d-flex" v-if="false">
			<view class="d-flex">
				<view class="head_txt">信阳市</view>
				<view class="head_nav_hight">
					<image class="head_nav" src="/static/images/btm_triangle2.svg"></image>
				</view>
			</view>
			<view class="head_search d-flex">
				<view class="img_search_height">
					<image class="img_search" src="/static/images/search.png"></image>
				</view>
				<input class="input head_input" placeholder="查找门店、筛选门店" placeholder-class="text-color-assist" />
			</view>
		</view>
		<view class="map_body">
			<map :latitude="latitude" :longitude="longitude" show-compass="true" show-location="true"
				:class="[click_view==1?'view_map':'map']"></map>
		</view>
		<view>
			<view class="uni-list" :class="{'list-active':click_view==1,'list':click_view!=1}">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd d-flex" v-for="(item, index) in merchants"
						:key="item.id">
						<view>
							<radio class="addr_radio" :value="item.id" :checked="index === current" color="#fd7e14"/>
						</view>
						<view class="addr_list">
							<view class="d-flex addr_name_nav">
								<view class="addr_name">{{item.name}}</view>
								<view class="d-flex addr_loc_nav" @tap="location(merchants)">
									<view class="img_locat">
										<image class="img_location" src="/static/images/location.png"></image>
									</view>
									<view class="navigation">导航</view>
								</view>
							</view>
							<view class="d-flex addr_area_km">
								<view class="addr_area">营业时间 {{item.server_time}}</view>
								<view class="addr_km">距离{{item.distance}}</view>
							</view>
							<view class="">
								<view class="addr_area">{{item.street}}</view>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="bottom_btn">
				<button type="primary" @tap="selectShop(merchants)">选择当前门店</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				latitude: 0, //纬度
				longitude: 0, //经度
				click_view: 1,
				merchants: [],
				current: 0,
			}
		},
		onShow() {
			this.Getlocation();
		},
		methods: {
			// 定位获取
			Getlocation() {
				var that = this
				uni.getLocation({
					type: 'wgs84', //默认为 wgs84 返回 gps 坐标
					geocode: true,
					isHighAccuracy: "true", //高度定位
					accuracy: "best", // 精度值为20m
					success: (res) => {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						console.log("获取经纬度ok",that.latitude,res.longitude);
						that.getMerchant()
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => { //complete 接口调用结束的回调函数（调用成功、失败都会执行）
						// 解析地址
					}
				})
			},
			selectShop(item){
				// console.log(this.current,item[this.current].username)
				uni.setStorageSync('admin_id', item[this.current].username)
				uni.switchTab({
					url:'/pages/menu/menu'
				})
			},
			radioChange: function(evt) {
				// console.log(evt.detail.value)
				for (let i = 0; i < this.merchants.length; i++) {
					// console.log(this.merchants[i].id, evt.detail.value, i)
					if (this.merchants[i].id == evt.detail.value) {
						this.current = i;
						// console.log(this.current)
						break;
					}
				}
			},
			getMerchant(){
				this.$http.get('merchant/list', {
					params: {
						'wx_min_app_appid': uni.getAccountInfoSync().miniProgram.appId,
						'latitude':this.latitude,
						'longitude':this.longitude,
					}
				}).then(res => {
					if (res.data.code == 0) {
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
					if (res.data.code == 1) {
						this.merchants = res.data.data
					}
				}).catch(err => {
				
				})
			},
			location(data){
				// console.log(data)
				uni.openLocation({
					latitude: Number(data[this.current].latitude),
					longitude: Number(data[this.current].longitude),
					success: function () {
						// console.log('success');
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		background-color: $bg-color-grey;
	}

	.head {
		width: 100vw;
		justify-content: space-between;
		flex-shrink: 0;
		height: 86rpx;
	}

	.head_txt {
		width: 114rpx;
		margin-left: 20rpx;
		color: #5A5B5C;
		font-size: 26rpx;
		text-align: center;
		height: 61rpx;
		line-height: 61rpx;
		margin-right: -24rpx;
	}

	.head_nav {
		width: 41rpx;
		height: 41rpx;
		margin-top: 10rpx;
		flex-shrink: 0;
	}

	.head_search {
		width: calc(100vw - 154rpx);
		justify-content: left;
		margin-right: 20rpx;
		padding: 7rpx;
		height: 61rpx;
		background: #e8e4e4;
	}

	.img_search_height {
		height: 57rpx;
		line-height: 57rpx;
	}

	.img_search {
		margin-left: 10rpx;
		height: 35rpx;
		width: 35rpx;
	}

	.head_input {
		flex: 1;
		margin-left: 5rpx;
		height: 40rpx;
		font-size: 28rpx;
		background: #e8e4e4;
	}

	.map {
		width: 100vw;
	}

	.view_map {
		width: 100vw;
	}

	.list {
		height: 114rpx;
		overflow: scroll;
	}

	.list-active {
		height: auto;
		overflow: scroll;
	}

	.look_track {
		width: 100vw;
		height: 54rpx;
		line-height: 54rpx;
		justify-content: center;
	}

	.view_shop {
		font-size: 26rpx;
		color: #5A5B5C;
	}

	.btm_arrow {
		width: 26rpx;
		height: 26rpx;
	}

	.uni-list {
		flex: 1;
		overflow: scroll;
		margin-left: 20rpx;
		margin-top: 30rpx;
	}

	.uni-list-cell {
		margin-top: 15rpx;
		width: 100%;
		height: 200rpx;
	}

	.addr_radio {
		height: 88rpx;
		line-height: 88rpx;
	}

	.addr_list {
		height: 88rpx;
		margin-left: 20rpx;
	}

	.addr_name {
		font-size: 33rpx;
	}

	.addr_area {
		font-size: 28rpx;
		color: #838381;
	}

	.addr_area_km {
		width: 85vw;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.addr_km {
		font-size: 25rpx;
		color: #838381;
	}

	.addr_name_nav {
		width: 85vw;
		justify-content: space-between;
	}

	.addr_loc_nav {
		flex-shrink: 0;
		text-align: center;
		border: 1rpx solid #5A5B5C;
		width: 130rpx;
		height: 47rpx;
		border-radius: 30rpx;
	}

	.img_locat {
		height: 53rpx;
		line-height: 53rpx;
		margin-left: 10rpx;
	}

	.img_location {
		width: 40rpx;
		height: 40rpx;
	}

	.navigation {
		height: 43rpx;
		line-height: 43rpx;
		font-size: 25rpx;
	}

	.bottom_btn {
		padding: 0 40rpx 20rpx 40rpx;
		margin-top: 50rpx;
	}

	.bottom_btn button {
		color: #FFF;
		line-height: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;
		font-size: 35rpx;
	}
</style>
